<script setup>
  import {ref,computed} from 'vue'
  // 计算属性
    //1.基本使用：基于现有数据，通过计算得到一个新的数据
    //2.语法：import {computed} from 'vue'
    //       const 新数据 = computed(()=>{ 
    //                                    //编写计算代码
    //                                    return 计算结果
    //                                   })
    //商品列表
    const goodsList = ref([
      { id: 1, name: '篮球', num: 1 },
      { id: 2, name: '玩具', num: 3 },
      { id: 3, name: '书籍', num: 2 }
    ])
    // 求和
    let count = computed(()=> {
      // value：获取数组内容
      // reduce：遍历数组进行求和
      return goodsList.value.reduce((prev,item)=>prev+item.num,0)
    })
</script>

<template>
  <h3>比特人的橱窗</h3>
  <table>
    <tr>
      <th>名字</th>
      <th>个数</th>
    </tr>
    <!-- 列表循环+指定id -->
    <tr v-for="item in goodsList"
        :key="item.id"
    >
  <!-- {{表示插值}} -->
      <td>{{ item.name }}</td>
      <td>{{ item.num }}</td>
    </tr>
  </table>
  <p>礼物个数：{{count}}个</p>
</template>

<style scoped>
  table {
    width: 350px;
    /* 边框大小+边框类型+颜色 */
    border: 1px solid #333;
  }
  table th,td {
          border: 1px solid #333;
        }
  table td {
    /* 表格内容，水平居中 */
    text-align: center;
  }
</style>  